<template>
  <div class="report-detail-container">
    <!-- 固定顶栏 -->
    <!-- <div class="header" flex-center p-15 justify-between>
      <div w-26 h-26 bg-white b-rd-full>
        <el-icon @click="goBack" ml-1 w-22 size="25px" style="cursor: pointer">
          <ArrowLeft></ArrowLeft>
        </el-icon>
      </div>
      <div></div>
    </div> -->

    <div class="title" flex-center mt-50>
      <h3 text-30 fw-bold>测评报告</h3>
    </div>

    <div class="questionnaire" p-20 mt-30>
      <TableLinkCard class="table-link-card"></TableLinkCard>
    </div>

    <!-- 报告主体 -->
    <div class="main" p-20>
      <el-card style="border-radius: 20px">
        <div class="guest main-item">
          <p class="sub-title">服务对象：</p>
          <p class="content">吉首大学</p>
        </div>
        <el-divider />

        <div class="num main-item">
          <p class="sub-title">参与人数：</p>
          <p class="content">114514人</p>
        </div>
        <el-divider />

        <div class="graph main-item">
          <p class="sub-title">测评结果：</p>
          <div flex-center>
            <el-card
              style="
                border: none;
                border-radius: 20px;
                height: 450px;
                margin-top: 20px;
              "
            >
              <div w-600 h-500>
                <Graph></Graph>
              </div>
            </el-card>
          </div>
        </div>
      </el-card>
    </div>

    <div class="summary" p-20>
      <el-card style="border-radius: 20px">
        <p class="sub-title">总结：</p>
        <p class="content">
          补充维生素的唯一方式是过量收听广播体操，那么为什么远方的船不好吃？
          后来我才明白，我是一只穿山甲，而你是永动机。
        </p>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import TableLinkCard from "./components/TableLinkCard.vue";
import Graph from "./components/Graph.vue";

// const goBack = () => {
//   window.history.go(-1);
// };
</script>

<!-- <script>
/**
 * 报告详情页
 * 负责人：唐诗轶
 */
export default {
  name: "ReportDetail",
};
</script> -->

<style scoped>
.table-link-card:active {
  transform: scale(0.99);
  transition: all 0.2s;
}

p {
  margin: 10px;
}

.sub-title {
  font-size: 20px;
  font-weight: bolder;
  line-height: 30px;
}

.content {
  text-indent: 2em;
  font-family: cursive;
  font-size: 18px;
  line-height: 25px;
}

.main-item {
  margin-bottom: 30px;
}
</style>
